<template>
  <!-- 2个列表 -->
  <div id="app">
    <div class="col-md-12">
      <form class="form-inline">
        <ul id="playul">
          <li>
            <label for="name">&nbsp;节目名称:</label>
            <input
              type="text"
              class="form-control"
              id="usnameval"
              onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
              placeholder="请输入节目名称"
              style="width:170px;"
            />
          </li>
          <li>
            <label for="name">&nbsp;节目类型:</label>
            <select title id="type" class="form-control" style="width:132px;">
              <option value>全部</option>
              <option value="0">公益广告</option>
              <option value="1">商业广告</option>
              <option value="2">即时节目</option>
              <option value="3">简短固定广告</option>
            </select>
          </li>

          <li>
            <button type="button" class="btn btn-primary" id="selectPlay">查询</button>
          </li>
          <li></li>
        </ul>
      </form>
      <div class="col-md-5" style="padding-right: 0px; padding-left: 0px;">
        <div class="jqGrid_wrapper">
          <table id="table_list_1"></table>
          <div id="pager_list_1"></div>
        </div>
      </div>
      <div class="col-md-2" style="padding-right: 0px; padding-left: 0px;">
        <div id="czdiv">
          <div style="text-align:center">
            <br />
            <br />
            <br />
          </div>
          <br />
        </div>

        <div id="sydiv">
          <div style="text-align:center">
            <br />
            <van-row>
              <van-col>
                <button
                  type="button"
                  class="btn btn-success"
                  id="setPlay"
                  data-toggle="modal"
                  data-target="#playModal"
                >添加</button>
              </van-col>
            </van-row>
          </div>
          <br />
          <div style="text-align:center">
            <van-row>
              <van-col>
                <button
                  type="button"
                  class="btn btn-info"
                  id="setPlay"
                  data-toggle="modal"
                  data-target="#playModal"
                >修改</button>
              </van-col>
            </van-row>
          </div>
          <br />

          <div style="text-align:center">
            <van-row>
              <van-col>
                <button type="button" class="btn btn-warning" id="sydel">删除播放节目</button>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
      <div class="col-md-5" style="padding-right: 0px; padding-left: 0px;">
        <div style="border: 1px solid #ddd; overflow: auto;" id="cz">
          <table class="table table-bordered">
            <caption>
              <h4>广告播放节目列表</h4>
            </caption>
            <thead>
              <tr>
                <th style="text-align: center">
                  <input onclick="all1(this)" type="checkbox" style />
                </th>
                <th>节目号</th>
                <th>节目名称</th>
              </tr>
            </thead>
            <tbody style="height:50px"></tbody>
          </table>
          <div
            id="czdata"
            style="display: block;font-weight: bold;
    color: brown;text-align: center;display: none;"
          >没有符合数据</div>
        </div>
      </div>
    </div>

    <!-- 定时-->
    <div
      class="modal fade"
      id="playModal"
      style="overflow:auto"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">设备选择</h4>
          </div>
          <div class="modal-body">
            <table>
              <tr>
                <td>
                  <label for="name">设备号：</label>
                </td>
                <td>
                  <input
                    type="text"
                    style="width:190px"
                    autocomplete="off"
                    class="form-control"
                    id="device_id"
                    placeholder="请输入设备号"
                    readonly
                    onclick="showMenudevicesingle(this)"
                  />
                  <loaddevicesingle></loaddevicesingle>
                </td>
              </tr>

              <tr>
                <td>
                  <label for="name" class="control-label">日期:</label>
                </td>
                <td>
                  <div class="form-group">
                    <input
                      type="text"
                      style="width:120px"
                      class="date_picker input form-control"
                      id="startDate"
                      autocomplete="off"
                    />
                  </div>
                </td>
               <p style="margin:2px -43px;font-size: 23px;">~</p>
                <td>
                  <div class="form-group">
                    <input
                      type="text"
                      style="width:120px"
                      class="date_picker input form-control"
                      id="endDate"
                      autocomplete="off"
                    />
                  </div>
                </td>
              </tr>
            </table>
            <table>
              <tr>
                <td> <label for="name">星期</label></td>
                <td>
                  <week></week>
                </td>
              </tr>
              <tr>
                <td>
                  <label for="name">时间段</label>
                </td>
                <td>
                  <div id="timediv">
                    <select class="form-control" id="timing"></select>
                  </div>
                </td>
              </tr>
            </table>

            <table id="times" style="margin:"></table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="sbfs">发送</button>
          </div>
        </div>
      </div>
    </div>

    <div></div>
  </div>
</template>
<style>
@import "../../../../static/css/ztree/metroStyle.css";

@import "../../../../static/css/page/Program/listplay.css";
@import "../../../../static/css/mloading/jquery.mloading.css";

#playul {
  display: -webkit-inline-box;
  list-style: none;
}
#playul li {
  margin-left: 5px;
}

/* #times tr >td{
     padding-left: 3px;
} */
</style>
<style  scoped>
ul.ztree {
  margin-top: 10px;
  border: 1px solid #617775;
  background: #f0f6e4;
  width: 210px;
  height: 360px;
  overflow-y: scroll;
  overflow-x: auto;
}
.ztree {
  margin: 0;
  padding: 5px;
  color: #333;
}
::-webkit-scrollbar {
  width: 6px;
  /*height: 6px;*/
}
/*正常情况下滑块的样式*/
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
/*鼠标悬浮在该类指向的控件上时滑块的样式*/
:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
/*鼠标悬浮在滑块上时滑块的样式*/
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
/*正常时候的主干部分*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: white;
}
/*鼠标悬浮在滚动条上的主干部分*/
::-webkit-scrollbar-track:hover {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.01);
}
</style>
<script>
import "../../../../static/js/jqgrid/jquery.jqGrid.min.js";
import "../../../../static/js/jqgrid/grid.locale-cn.js";
import "../../../../static/js/page/Program/listplay.js";
import "../../../../static/js/mloading/jquery.mloading.js";

import "../../../../static/js/time/jquery.date_input.pack.js";
import "../../../../static/js/time/timer.js";

import loaddevicesingle from "@/views/tree/devicesingle.vue";
import week from "@/views/Page/Common/week.vue";
export default {
  name: "app",
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  components: {
    loaddevicesingle: loaddevicesingle,
    week:week
  }
};
</script>